<template>
  <div class="move-box">
    <div class="move-list" ref="moveList" id="moveListStyle15"></div>
  </div>
</template>  

<script setup lang="ts">
import { onMounted, watch, nextTick, ref } from 'vue';
import ExhibitsDialog from '@/freeComponents/exhibitsDialog/index.vue';
import { orientationScroll } from '@/utils/scrollHtml';
import { useProjectStore, commonDataStore } from '@/store';
const commonStore = commonDataStore();
const store = useProjectStore();
const moveList = ref();
const init = () => {
  let templateId: number = commonStore.getDigitalShowroom();
};

function createFireflies() {
  const numFireflies = 25; // 萤火虫数量
  const container = document.getElementById('moveListStyle15');
  console.log(container, '5555');
  for (let i = 0; i < numFireflies; i++) {
    const firefly = document.createElement('div');
    firefly.classList.add('firefly');

    // 随机位置
    const x = Math.random() * window.innerWidth;
    const y = Math.random() * 60;
    firefly.style.left = `${x}px`;
    firefly.style.top = `${y}vh`;

    // 随机大小
    const size = Math.random() * 0.48 + 0.4; // 4px 到 8px
    firefly.style.width = `${size}vh`;
    firefly.style.height = `${size}vh`;

    // 随机闪烁速度
    const duration = Math.random() * 2 + 1; // 1s 到 3s
    firefly.style.animationDuration = `${duration}s`;

    // 添加到页面
    container.appendChild(firefly);

    // 随机移动
    moveFirefly(firefly);
  }
}

// 让萤火虫随机移动
function moveFirefly(firefly) {
  setInterval(() => {
    const x = Math.random() * window.innerWidth;
    const y = Math.random() * 60;
    firefly.style.transition = 'all 8s linear'; // 平滑移动
    firefly.style.left = `${x}px`;
    firefly.style.top = `${y}vh`;
  }, 8000); // 每5秒移动一次
}

// 初始化

onMounted(() => {
  nextTick(() => {
    createFireflies();
  });
});
// 窗口大小变化时重新布局
window.addEventListener('resize', () => {
  document.querySelectorAll('.firefly').forEach((firefly) => {
    const x = Math.random() * window.innerWidth;
    const y = Math.random() * window.innerHeight;
    firefly.style.left = `${x}px`;
    firefly.style.top = `${y}px`;
  });
});
// watch(
//   () => store.resizeShow,
//   () => {
//     resizeShows.value = false;
//     nextTick(() => {
//       resizeShows.value = true;
//     });
//   },
//   { deep: true },
// );
</script>  
 
<style scoped lang="less">
.move-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.move-list {
  position: relative;
  width: 100%;
  height: 100%;
}
:deep(.firefly) {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #f0e68c; /* 萤火虫颜色 */
  border-radius: 50%;
  box-shadow: 0 0 10px 2px #f0e68c; /* 发光效果 */
  opacity: 0; /* 初始透明度为0 */
  animation: blink 2s infinite ease-in-out; /* 闪烁动画 */
}

/* 闪烁动画 */
@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
</style>